<template>
  <div class="dashboard-container">
    <div>
      <el-row>
        <el-form id="uploadForm" method="post" enctype="multipart/form-data" class="upload-file_container">
          <div>
            <label for="uploadFile">选择表格文件：</label>
            <input id="uploadFile" type="file" name="file" multiple accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
          </div>
          <div>
            <input class="button" type="button" value="上传温度表" @click="onUploadTemperature">
          </div>
          <div>
            <input class="button" type="button" value="上传电流表" @click="onUploadCurrent">
          </div>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="12">
          <label style="color: #20a0ff; margin-left: 40%">模型列表：</label>
          <el-select v-model="selectedTrainModel" clearable placeholder="请选择">
            <el-option
              v-for="item in trainModelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          <div>
            <el-button type="success" style="margin-left: 0%" @click="onTrainModel">模型训练</el-button>
          </div>
        </el-col>
      </el-row>
      <h1></h1>
      <el-row>
        <el-col :span="12">
          <label style="color: #20a0ff; margin-left: 40%">模型列表：</label>
          <el-select v-model="selectedModel" clearable placeholder="请选择">
            <el-option
              v-for="item in modelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          <div>
            <el-button type="primary" style="margin-left: 0%" @click="onPredictModel">模型预测</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div id="right" style="float: none;height: 55px;color: darkgoldenrod;display: block;padding-top:10px;font-weight: bold;background-color: #1f2d3d">
      <label>机号</label>
      <el-select v-model="selectedDeviceNumber" placeholder="请选择">
        <el-option
          v-for="item in deviceNumberOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
<!--      <input id="deviceNum" style="width: 50px;border-color: darkslategray;border-width: 0px;border-radius: 5%;" type="text" name="deviceNum" value="1">-->
      <label style="margin-left: 10px;">子设备</label>
<!--      <input id="deviceName" style="width: 300px;border-color: darkslategray;border-width: 0px;border-radius: 5%;" type="text" name="deviceName" value="1号主变35KV套管接线夹A相">-->
      <el-select v-model="selectedDeviceName" placeholder="请选择">
        <el-option
          v-for="item in deviceNameOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      <label for="date" style="margin-left: 30%;">时间</label>
      <input id="date" type="date" name="date" value="2021" style="border-color: darkslategray;border-width: 0px;border-radius: 5%;">
      <button id="btn" style="margin-left: 10px;border-radius: 5%;border-color: aquamarine;" @click="btnClick">确定</button>
    </div>
    <div id="left" style="float: none;height: 100%;padding-top:10px;padding-left: 20px;padding-right: 10px;color: darkgoldenrod;font-weight: bold;text-align: center" />

    <div id="main" style="width:100%;height:120%;background-color: #101e44;min-height: 100%;">
      <div id="line1" style="width: 50%;float: left;" />
      <div id="line2" style="width: 50%;float: right;" />
      <div id="line3" style="width: 50%;float: left;" />
      <div id="line4" style="width: 50%;float: right;" />
    </div>
  </div>
</template>

<script>
import { one, uploadTemperatureExcel, uploadCurrentExcel, trainModel, predictModel, getAvailableModel, getDeviceNumbers, getDeviceNames } from '@/api/power'
import $ from '@/api/jquery'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      myChart1: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      list: null,
      listLoading: true,
      windDirectionList: [],
      equipmentNameList: [],
      holderList: [],
      usingModel: 'GRU',
      modelOptions: [{
        value: 'GRU',
        label: 'GRU'
      }, {
        value: 'LSTM',
        label: 'LSTM'
      }],
      selectedModel: '',
      trainModelOptions: [{
        value: 'GRU',
        label: 'GRU'
      }, {
        value: 'LSTM',
        label: 'LSTM'
      }],
      selectedTrainModel: '',
      deviceNameOptions: [
        {
          value: 'xxx套线管',
          label: 'xxx套线管'
        }, {
          value: 'xxx升高座',
          label: 'xxx升高座'
        }
      ],
      selectedDeviceName: '',
      deviceNumberOptions: [
        {
          value: '1号机',
          label: '1号机'
        }, {
          value: '2号机',
          label: '2号机'
        }
      ],
      selectedDeviceNumber: '',
      option1: {
        backgroundColor: '#fff',
        title: {
          show: true,
          text: '设备温度',
          // subtext: '2021 4.1 1号主变35KV套管升高座A相',
          left: 'center',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            }
            /* {
              name: '预测',
              icon: 'rect'
            } */
          ]
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const index = params[0].dataIndex
            let str = ''
            str += equipmentNameList[index] + '<br/>' + '云台方位: ' + holderList[index] + '<br/>' + '风向: ' + windDirectionList[index] + '<br/>' + params[0].seriesName + ': ' + params[0].data
            return str
          },
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#19a3df'
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                )
              }
            },
            data: [],
            type: 'line'
          }
          /* {
              name: "预测",
              smooth: true,
              showSymbol: true,
              symbolSize: 8,
              zlevel: 3,
              itemStyle: {
                  color: '#6f7de3',
                  borderColor: "#a3c8d8"
              },
              lineStyle: {
                  normal: {
                      width: 6,
                      color: "#6f7de3",
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                              offset: 0,
                              color: "rgba(88,255,255,0.2)"
                          },
                              {
                                  offset: 0.8,
                                  color: "rgba(88,255,255,0)"
                              }
                          ],
                          false
                      ),
                  }
              },
              data: [],
              type: 'line'
          }*/
        ]
      },
      option2: {
        backgroundColor: '#fff',
        title: {
          show: true,
          text: '设备温度',
          // subtext: '2021 4.1 1号主变35KV套管升高座A相',
          left: 'center',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            }
            /* {
              name: '预测',
              icon: 'rect'
            } */
          ]
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const index = params[0].dataIndex
            let str = ''
            str += equipmentNameList[index] + '<br/>' + '云台方位: ' + holderList[index] + '<br/>' + '风向: ' + windDirectionList[index] + '<br/>' + params[0].seriesName + ': ' + params[0].data
            return str
          },
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#19a3df'
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                )
              }
            },
            data: [],
            type: 'line'
          }
          /* {
              name: "预测",
              smooth: true,
              showSymbol: true,
              symbolSize: 8,
              zlevel: 3,
              itemStyle: {
                  color: '#6f7de3',
                  borderColor: "#a3c8d8"
              },
              lineStyle: {
                  normal: {
                      width: 6,
                      color: "#6f7de3",
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                              offset: 0,
                              color: "rgba(88,255,255,0.2)"
                          },
                              {
                                  offset: 0.8,
                                  color: "rgba(88,255,255,0)"
                              }
                          ],
                          false
                      ),
                  }
              },
              data: [],
              type: 'line'
          }*/
        ]
      },
      option3: {
        backgroundColor: '#fff',
        title: {
          show: true,
          text: '设备温度',
          // subtext: '2021 4.1 1号主变35KV套管升高座A相',
          left: 'center',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            }
            /* {
              name: '预测',
              icon: 'rect'
            } */
          ]
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const index = params[0].dataIndex
            let str = ''
            str += equipmentNameList[index] + '<br/>' + '云台方位: ' + holderList[index] + '<br/>' + '风向: ' + windDirectionList[index] + '<br/>' + params[0].seriesName + ': ' + params[0].data
            return str
          },
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#19a3df'
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                )
              }
            },
            data: [],
            type: 'line'
          }
          /* {
              name: "预测",
              smooth: true,
              showSymbol: true,
              symbolSize: 8,
              zlevel: 3,
              itemStyle: {
                  color: '#6f7de3',
                  borderColor: "#a3c8d8"
              },
              lineStyle: {
                  normal: {
                      width: 6,
                      color: "#6f7de3",
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                              offset: 0,
                              color: "rgba(88,255,255,0.2)"
                          },
                              {
                                  offset: 0.8,
                                  color: "rgba(88,255,255,0)"
                              }
                          ],
                          false
                      ),
                  }
              },
              data: [],
              type: 'line'
          }*/
        ]
      },
      option4: {
        backgroundColor: '#fff',
        title: {
          show: true,
          text: '设备温度',
          // subtext: '2021 4.1 1号主变35KV套管升高座A相',
          left: 'center',
          top: '10%',
          textStyle: {
            color: '#00ca95',
            fontSize: 20
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        toolbox: {
          top: '2%',
          left: '15%',
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          top: '10%',
          right: '15%',
          textStyle: {
            color: '#00ca95'
          },
          data: [
            {
              name: '实际',
              icon: 'rect'
            }
            /* {
              name: '预测',
              icon: 'rect'
            } */
          ]
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            const index = params[0].dataIndex
            let str = ''
            str += equipmentNameList[index] + '<br/>' + '云台方位: ' + holderList[index] + '<br/>' + '风向: ' + windDirectionList[index] + '<br/>' + params[0].seriesName + ': ' + params[0].data
            return str
          },
          backgroundColor: '#3B3629',
          padding: 5,
          textStyle: {
            color: '#EDF513',
            fontWeight: 'bold'
          },
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#243753'
            }
          },
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          boundaryGap: false,
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#7ec7ff'
            }
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40
          },
          splitLine: {
            lineStyle: {
              color: '#243753'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#283352'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '实际',
            smooth: true,
            showSymbol: true,
            symbolSize: 8,
            zlevel: 3,
            itemStyle: {
              color: '#19a3df',
              borderColor: '#a3c8d8'
            },
            lineStyle: {
              normal: {
                width: 6,
                color: '#19a3df'
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: 'rgba(88,255,255,0.2)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(88,255,255,0)'
                  }
                  ],
                  false
                )
              }
            },
            data: [],
            type: 'line'
          }
          /* {
              name: "预测",
              smooth: true,
              showSymbol: true,
              symbolSize: 8,
              zlevel: 3,
              itemStyle: {
                  color: '#6f7de3',
                  borderColor: "#a3c8d8"
              },
              lineStyle: {
                  normal: {
                      width: 6,
                      color: "#6f7de3",
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [{
                              offset: 0,
                              color: "rgba(88,255,255,0.2)"
                          },
                              {
                                  offset: 0.8,
                                  color: "rgba(88,255,255,0)"
                              }
                          ],
                          false
                      ),
                  }
              },
              data: [],
              type: 'line'
          }*/
        ]
      }
    }
  },
  created() {
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      one().then((res) => {
        if (res.code === 20000) {
          /* this.putData1(eval(res.data.data))
          this.putData2(eval(res.data.data))
          this.putData3(eval(res.data.data))
          this.putData4(eval(res.data.data)) */
          this.initChart(eval(res.data.data))
        } else {
          alert('加载表格数据失败！')
        }
      })
      getAvailableModel().then(res => {
        if (res.code === 20000) {
          this.modelOptions = res.data.data
          this.trainModelOptions = res.data.data
        } else {
          alert('加载模型列表失败')
        }
      })
      getDeviceNames().then(res => {
        if (res.code === 20000) {
          this.deviceNameOptions = res.data.data
        } else {
          alert('加载设备名称失败')
        }
      })
      getDeviceNumbers().then(res => {
        if (res.code === 20000) {
          this.deviceNumberOptions = res.data.data
        } else {
          alert('加载设备机号失败')
        }
      })
    }, // load
    btnClick() {
      var deviceNum = this.selectedDeviceNumber
      var deviceName = this.selectedDeviceName
      var date = $('#date').val()
      if (date !== '' && deviceName !== '' && deviceNum !== '') {
        this.getData(deviceNum, deviceName, date)
      } else {
        console.info(deviceNum + ':' + deviceName + ':' + date)
        this.$message.error('请选择设备机号、设备名称和日期')
      }
      // alert("option.series=>" + option.series);
      // console.log(date)
    }, // btnClick
    onUploadTemperature() {
      const files = document.getElementById('uploadFile').files
      if (files.length === 0) {
        this.$message.error('请选择待上传的文件')
        return
      }
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append('temperaturefile', files[i])
      }
      formData.append('date', '')
      uploadTemperatureExcel(formData).then(response => {
        if (response.code === 20000) {
          alert('上传设备温度文件成功')
        } else {
          alert('上传设备温度文件失败')
        }
      })
    }, // onUploadTemperature
    onUploadCurrent() {
      const files = document.getElementById('uploadFile').files
      if (files.length === 0) {
        this.$message.error('请选择待上传的文件')
        return
      }
      const formData = new FormData()
      for (let i = 0; i < files.length; i++) {
        formData.append('currentfile', files[i])
      }
      formData.append('date', '')
      uploadCurrentExcel(formData).then(response => {
        if (response.code === 20000) {
          alert('上传电流文件成功')
        } else {
          alert('上传电流文件失败')
        }
      })
    },
    onTrainModel() {
      if (this.selectedTrainModel === '') {
        this.$message.error('请选择模型')
        return
      }
      trainModel(this.selectedTrainModel).then(response => {
        console.log(response)
      })
    }, // onTrainModel
    onPredictModel() {
      if (this.selectedModel === '') {
        this.$message.error('请选择模型')
        return
      }
      predictModel(this.selectedModel).then(response => {
        console.log(response)
      })
    }, // onPredictModel
    getData(deviceNum, deviceName, date) {
      const data = { 'date': date, 'deviceName': deviceName, 'deviceNum': deviceNum }
      one(data).then((res) => {
        if (res.code === 20000) {
          const obj = eval(res.data.data)
          if (res.data === null) {
            alert('不存在当前数据文件夹')
          }
          this.putData1(obj)
          this.putData2(obj)
          this.putData3(obj)
          this.putData4(obj)
        } else {
          alert('无此文件！')
        }
      })
    }, // getDate
    initChart(data) {
      /* var mainContainer1 = document.getElementById('line1')
      // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeMainContainer = function() {
        mainContainer1.style.width = window.innerWidth / 2.5 + 'px'
        mainContainer1.style.height = window.innerHeight * 0.8 / 2 + 'px'
      }
      // 设置div容器高宽
      resizeMainContainer()
      this.myChart1 = this.$echarts.init(mainContainer1)
      $(window).on('resize', function() {
        // 屏幕大小自适应，重置容器高宽
        resizeMainContainer()
        this.myChart1.resize()
      })

      var mainContainer2 = document.getElementById('line2')
      // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeMainContainer2 = function() {
        mainContainer2.style.width = window.innerWidth / 2.5 + 'px'
        mainContainer2.style.height = window.innerHeight * 0.8 / 2 + 'px'
      }
      // 设置div容器高宽
      resizeMainContainer2()
      this.myChart2 = this.$echarts.init(mainContainer2)
      $(window).on('resize', function() {
        // 屏幕大小自适应，重置容器高宽
        resizeMainContainer2()
        this.myChart2.resize()
      })

      var mainContainer3 = document.getElementById('line3')
      // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeMainContainer3 = function() {
        mainContainer3.style.width = window.innerWidth / 2.5 + 'px'
        mainContainer3.style.height = window.innerHeight * 0.8 / 2 + 'px'
      }
      // 设置div容器高宽
      resizeMainContainer3()
      this.myChart3 = this.$echarts.init(mainContainer3)
      $(window).on('resize', function() {
        // 屏幕大小自适应，重置容器高宽
        resizeMainContainer3()
        this.myChart3.resize()
      })

      var mainContainer4 = document.getElementById('line4')
      // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      var resizeMainContainer4 = function() {
        mainContainer4.style.width = window.innerWidth / 2.5 + 'px'
        mainContainer4.style.height = window.innerHeight * 0.8 / 2 + 'px'
      }
      // 设置div容器高宽
      resizeMainContainer4()
      this.myChart4 = this.$echarts.init(mainContainer4)
      $(window).on('resize', function() {
        // 屏幕大小自适应，重置容器高宽
        resizeMainContainer4()
        this.myChart4.resize()
      }) */
      document.getElementById('line1').style.height = document.documentElement.clientHeight * 0.6 + 'px'
      this.myChart1 = this.$echarts.init(document.getElementById('line1'))
      document.getElementById('line2').style.height = document.documentElement.clientHeight * 0.6 + 'px'
      this.myChart2 = this.$echarts.init(document.getElementById('line2'))
      document.getElementById('line3').style.height = document.documentElement.clientHeight * 0.6 + 'px'
      this.myChart3 = this.$echarts.init(document.getElementById('line3'))
      document.getElementById('line4').style.height = document.documentElement.clientHeight * 0.6 + 'px'
      this.myChart4 = this.$echarts.init(document.getElementById('line4'))
      this.getData('1号机', '1号主变35KV套管接线夹A相', '')
    },
    putData1(jsonobj) {
      this.option1.xAxis.data = jsonobj[0]// 横轴一样为时间

      /* 温度*/
      this.option1.title.text = '设备温度'
      this.option1.series[0].data = jsonobj[1]

      // 初始化图表
      setTimeout(() => {
        this.myChart1.setOption(this.option1)
      }, 1000)

      /* 风向*/
      this.windDirectionList = jsonobj[5]

      /* 设备名称*/
      this.equipmentNameList = jsonobj[6]

      /* 云台方位*/
      this.holderList = jsonobj[7]

      document.getElementById('left').innerText = jsonobj[8]
    }, // putData
    putData2(jsonobj) {
      this.option2.xAxis.data = jsonobj[0]// 横轴一样为时间
      /* 设备温度*/
      this.option2.title.text = '环境温度'
      this.option2.series[0].data = jsonobj[2]
      setTimeout(() => {
        this.myChart2.setOption(this.option2)
      }, 1000)
    }, // putData
    putData3(jsonobj) {
      this.option3.xAxis.data = jsonobj[0]// 横轴一样为时间

      /* 环境湿度*/
      this.option3.title.text = '环境湿度'
      this.option3.series[0].data = jsonobj[3]
      setTimeout(() => {
        this.myChart3.setOption(this.option3)
      }, 500)
    }, // putData
    putData4(jsonobj) {
      this.option4.xAxis.data = jsonobj[0]// 横轴一样为时间

      /* 风速*/
      this.option4.title.text = '风速'
      this.option4.series[0].data = jsonobj[4]
      setTimeout(() => {
        this.myChart4.setOption(this.option4)
      }, 500)
    } // putData
  }
}
</script>

<style>
.tab-container {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  display: flex;
}
a.tab-item {
  padding-right: 50px;
  font-size: 18px;
  color: gray;
}

a.tab-item.active {
  color: orange;
  font-size: 24px;
  font-weight: bold;
}
.upload-file_container {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-file_container .button {
  transition-duration: 0.4s;
  background-color: orange;
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
}
.upload-file_container .button:hover {
  background-color: white;
  color: orange;
}

.table-bordered td {
  border: 1px solid #000 !important;
  text-align: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
